<template>
  <page-wrap :show-top="showTop" :title="'查看分类'" back hideTab>
    <view
      class="wrapper"
      :style="'padding-top:' + navHeight + 'px;'"
      type="line"
    >
      <view class="title"> 请选择你要查看的专业报告分类 </view>
      <view class="content">
        <view class="left">
          <view class="tabs">
            <view
              :class="{ tabsItem: true, active: activeIndex == index }"
              v-for="(item, index) in category_list"
              :key="item.selfId"
              @click="handleLeftClick(item, index)"
            >
              {{ item.selfName }}
            </view>
          </view>
        </view>
        <view class="right">
          <view class="categoryItemContainer">
            <view
              class="categoryItem"
              v-for="(item, index) in right_list"
              :key="item.selfId"
            >
              <view class="categoryTitle">{{ item.selfName }}</view>
              <view class="categoryTagsContainer">
                <view class="categoryTags">
                  <u-tag
                    v-for="(_item, _index) in item.children"
                    :key="_item.selfId"
                    bgColor="#F4F4F4"
                    :text="_item.selfName"
                    @click="handleTagClick(_item, index, _index)"
                    class="categoryTag"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loading-page :loading="loading"></u-loading-page>
    </view>
  </page-wrap>
</template>

<script>
import {
  reqGetChildByMajorId,
  // reqGetIndexReportList,
  // reqClickReport,
} from "@/api/modules/report";
export default {
  name: "allCategory",
  data() {
    return {
      activeIndex: 0,
      category_list: [],
      right_list: [],
      firstLevelName: "",
      loading: false,
      navHeight: 0,
    };
  },
  onLoad() {
    this.getChildByMajorId();
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
  },
  methods: {
    handleLeftClick(item, index) {
      // console.log(item, index);
      this.activeIndex = index;
      this.right_list = item.children;
      this.firstLevelName = item.selfName;
    },
    getChildByMajorId() {
      this.loading = true;
      let params = { majorIds: 0, typeLevel: 0 };
      reqGetChildByMajorId(params)
        .then((res) => {
          if (res.code == 200) {
            this.category_list = res.data;
            this.right_list = this.category_list.length
              ? this.category_list[0].children
              : [];
            this.firstLevelName = this.category_list[0].selfName;
          } else {
            console.log(majorRes.status_desc);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleTagClick(item, index, _index) {
      let categoryInfo = {
        majorId: item.selfId,
        index: index,
        _index: _index,
        categoryName: this.firstLevelName,
      };
      uni.setStorageSync("categoryInfo",JSON.stringify(categoryInfo));
      uni.navigateTo({
        url: `/pagesSub/reportCate/careerCategory/index`,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.wrapper {
  width: 100vw;
  .title {
    display: flex;
    align-items: center;
    height: 140rpx;
    padding-left: 32rpx;
    font-size: 36rpx;
    font-weight: bold;
    background-color: #fff;
    color: #222222;
    font-family: PingFang-SC-Heavy;
    position: sticky;
  }
  .content {
    display: flex;
    height: calc(100vh - 268rpx);
    overflow-y: hidden;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-width: 200rpx;
      // height: auto !important;
      background-color: #f4f4f4;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .tabs {
        .tabsItem {
          font-size: 26rpx;
          // padding: 32rpx;
          padding-right: 0;
          color: #a3a3a3;
          padding-left: 32rpx;
          height: 100rpx;
          line-height: 100rpx;
          &.active {
            color: #464646;
            font-weight: bold;
          }
          &.active::after {
            float: right;
            content: "";
            width: 4rpx;
            height: 100rpx;
            background: #e93022;
            border-radius: 2rpx;
          }
        }
      }
    }
    .right {
      padding-left: 20rpx;
      // height: calc(100vh - 198rpx);
      display: flex;
      flex: 1;
      flex-direction: column;
      align-content: flex-start;
      justify-content: flex-start;
      background-color: #fff;
      overflow: hidden;
      // padding-bottom: 100rpx;
      .categoryItemContainer {
        overflow: scroll;
        .categoryItem {
          .categoryTitle {
            font-weight: bold;
          }
          .categoryTagsContainer {
            .categoryTags {
              display: flex;
              flex-wrap: wrap;
              padding: 30rpx 0;
              .categoryTag {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 8rpx;
                background-color: #f4f4f4;
                margin: 12rpx 8rpx;
                height: 56rpx;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .u-mode-light-primary {
  color: #555555 !important;
  border: none !important;
}
::v-deep .u-size-default {
  font-size: 24rpx !important;
}
</style>
